import React, { useState, useRef, useEffect } from 'react'
import { useScroll } from 'ahooks'
import { Tabs, Swiper } from 'antd-mobile'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import Recommend from '../../Recommend'
import Restaurant from '../Restaurant'
import { Wrapper } from './style'

interface Style {
    style: any
}
function TabsBar() {
    const [hidden, setHiddlen] = useState(false)
    const tabsRef = useRef<Style>(null)
    const scroll = useScroll()
    // console.log(scroll)
    // console.log(tabsRef.current)
    // useEffect(() => {  
    //     if (scroll && scroll.top > 274) {
    //             setHiddlen(true)
    //     } else {
    //         setHiddlen(false)
    //     }
    // }, [JSON.stringify(scroll)])

    const swiperRef = useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = useState(0)
    const tabItems = [
        { title: '推荐', key: '1', element: <Recommend /> }, { title: '餐厅', key: '2', element: <Restaurant /> },
        { title: '户型改造', key: '3', element: '户型改造' }, { title: '装修避坑', key: '4', element: '装修避坑' },
        { title: '色彩搭配', key: '5', element: '色彩搭配' }, { title: '智能家居', key: '6', element: '智能家居' },
        { title: '收纳技巧', key: '7', element: '收纳技巧' }, { title: '卧室', key: '8', element: '卧室' }
    ]
    return (
        <Wrapper>
            <Tabs 
                activeKey={tabItems[activeIndex].key}
                onChange={key => {
                    const index = tabItems.findIndex(item => item.key === key)
                    setActiveIndex(index)
                    swiperRef.current?.swipeTo(index)
                }}
            >
                { tabItems.map(item => (
                    <Tabs.Tab title={item.title} key={item.key} />                   
                )) }           
            </Tabs>
            <Swiper
                // loop
                indicator={() => null}
                ref={swiperRef}
                defaultIndex={activeIndex}
                onIndexChange={index => setActiveIndex(index)}
            >
                { tabItems.map(item => (
                    <Swiper.Item  key={item.key}> {item.element}</Swiper.Item>                 
                )) }  
            </Swiper>
        </Wrapper>
    )
}

export default TabsBar